<template>
  <div class="big">
    <div class="item" v-for="item in list" :key="item">
      <component :is="item"></component>
    </div>
  </div>
</template>

<script>
import age from "./ageStructure/index"
import build from "./building/index"
import emp from "./emphasis/index"
import entr from "./entranceGuard/index"
import flow from "./flow/index"
import change from "./HouseChange/index"
import types from "./HousingTypes/index.vue"
import map from "./map/index"
import midd from "./middleFooter/index"
import occ from "./occupancy/index"
import saf from "./safety/index"
import score from "./score/index"
import warn from "./warnTable/index"
export default {
  components: {
    age,build,emp,entr,flow,change,types,map,midd,occ,saf,
    score,warn
  },
  data() {
    return {
      list: ["age","build","emp","entr","flow",
        "change","types","map","midd","occ","saf",
        "score","warn"]
    }
  }
}
</script>

<style lang="scss">
  .big {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
</style>